<template>
<span>
    <label v-for="(item, key) in renderedQuery" :key="key">
        <label v-if="item.visible" style="padding-left:5px;">{{ item.label }}</label>
        <label v-if="item.visible" :style="`display:inline-block;width:${item.width}px;`">
            <Input v-if="item.type=='input'" v-model="item.value" @on-change="item.onChange" :placeholder="item.placeholder"></Input>
            <Select v-else-if="item.type=='select'" v-model="item.value" @on-change="item.onChange" :placeholder="item.placeholder" @on-focus="console.log(345)">
                <Option v-for="option in item.options" :value="option.value" :key="option.value">{{ option.label }}</Option>
            </Select>
            <DatePicker v-else-if="item.type=='date'" type="date" v-model="item.value" @on-change="item.onChange" :placeholder="item.placeholder"></DatePicker>
        </label>
    </label>
    <Button v-if="renderedButtons.search" type="primary" @click="handleSearch" :loading="search_loading">查询</Button>
    <Button v-if="renderedButtons.search_all" type="primary" @click="handleSearchAll" :loading="search_all_loading">查询全部</Button>
    <Button v-if="renderedButtons.export_excel" type="primary" @click="handleExportExcel">导出Excel</Button>
</span>
</template>

<script>
/*
    以查询条件为属性，自动生成页面元素
    以page类为属性，将查询条件生成对象传给page
*/
import Page from "@/common/model/Page";

export default {
    props: {
        query: {
            type: Object
        },
        page: {
            type: Page
        },
        buttons: {
            type: Array,
            default: () => { return ["search", "search_all"]; } //["search", "search_all", "export_excel"]
        }
    },
    data() {
        return {
            search_loading: false,
            search_all_loading: false
        };
    },
    computed: {
        renderedQuery() {
            for(var key in this.query) {
                var elem = this.query[key];
                elem.render(elem);
            }
            return this.query;
        },
        renderedButtons() {
            var temp = {
                search: false,
                search_all: false,
                export_excel: false
            };
            this.buttons.forEach( elem => {
                temp[elem] = true;
            });
            return temp;
        }
    },
    methods: {
        search() {
            this.handleSearch();
        },
        handleSearch() {
            this.page.action_data = this.getActionData();
            this.search_loading = true;
            this.page.getData( res => {
                this.search_loading = false;
                this.$emit("on-search", res);
            });
        },
        handleSearchAll() {
            this.initActionData();
            this.page.action_data = this.getActionData();
            this.search_all_loading = true;
            this.page.getData( res => {
                this.search_all_loading = false;
                this.$emit("on-search-all", res);
            });
        },
        handleExportExcel() {
            this.page.exportExcel();
        },
        initActionData() {
            for(var key in this.query) {
                this.query[key].value = this.query[key].default;
            }
        },
        getActionData() {
            var temp = {};
            for(var key in this.query) {
                var elem = this.query[key];
                var value = elem.value;
                if(elem.type == "date") {
                    value = Date.parse(value);
                }
                temp[key] = elem.handleValue(value);
            }
            return temp;
        },
        formatQuery() {
            var special_prop = {
                input: {},
                select: { options: [] },
                //datetime: { format: "yyyy-MM-dd" }
            }
            for(var key in this.query){
                var elem = this.query[key];
                var temp = {
                    type: "", // 查询条件组件类型
                    label: "", // 条件名称
                    default: "", // 默认值
                    value: "", // 显示值，不设置自动取默认值
                    width: 150, // 组件宽度
                    placeholder: "", // 组件内容占位符
                    visible: true,
                    onChange: value => {  }, // change事件
                    render: query => {  },
                    handleValue: value => { return value; }
                };
                Object.assign(temp, special_prop[elem.type], elem);
                if(typeof(elem.value) == "undefined" && typeof(elem.default) != "undefined") temp.value = temp.default;
                Object.assign(elem, temp);
            }
            this.page.action_data = this.getActionData();
        }
    },
    created() {
        this.formatQuery();
    },
    watch: {
        "query": "formatQuery"
    }
}
</script>